<template>
<div class="new-msg-ins" @mouseover="showBtns" @mouseout="showBtns">
  <div class="new-msg-user">
    <span>昵称：{{inMessage.userName}}</span>
    <span>{{inMessage.putTime}}</span>
  </div>
  <div class="new-msg-cont">
    <p>{{inMessage.userMessage}}</p>
    <div class="new-msg-btns clear-fix" :class="{'show-btns':isBtnsShow}">
      <ul>
        <li>
          <div>
            <img v-if="badShow" src="~assets/img/common/cai.svg" alt="" @click="badActive">
            <img v-else src="~assets/img/common/cai_act.svg" alt="" @click="badActive">
          </div>
        </li>
        <li>
          <div>
            <img v-if="goodShow" src="~assets/img/common/zan.svg" alt=""  @click="goodActive">
            <img v-else src="~assets/img/common/zan_act.svg" alt="" @click="goodActive">
          </div>
        </li>
        <li>
          <div>
            <span class="new-msg-reply" v-if="!replyMsgBox" @click="replyMsg()">回复</span>
            <span class="new-msg-reply" v-else @click="cancelReplyMsg()">取消回复</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <message-box v-if="replyMsgBox"/>
</div>
</template>

<script>
import MessageBox from 'components/content/messagebox/MessageBox'

export default{
  name: 'msg-in-msg',
  components: {
    MessageBox
  },
  data () {
    return {
      badShow: true,      //初始化踩图标
      goodShow: true,     //初始化点赞图标
      replyMsgBox: false, //回复框显示控制
      isBtnsShow: false   //回复等下排按钮是否显示
    }
  },
  props: {
    inMessage: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    /* 点踩切换高亮 */
    badActive() {
      this.badShow = !this.badShow
      this.goodShow = true
    },

    /* 点赞切换高亮 */
    goodActive() {
      this.goodShow = !this.goodShow
      this.badShow = true
    },
    
    /* 显示回复框 */
    replyMsg() {
      this.replyMsgBox = true
    },

    /* 隐藏回复框 */
    cancelReplyMsg() {
      this.replyMsgBox = false
    },

    /* 鼠标移入时显示回复等按钮 */
    showBtns() {
      this.isBtnsShow = !this.isBtnsShow
    }
  }
}
</script>

<style scoped>
.new-msg-ins{
  padding: 0 2px;
  border: 1px solid #ddddf0;
  border-radius: 5px;
  background-color: #ffffff;
}
.new-msg-ins:hover{
  background-color: #eeeefa;
}
.new-msg-user span{
  font-size: 13px;
  padding: 5px;
  color: #a1a1a1;
}
.new-msg-user span:nth-child(2){
  float: right;
}
.new-msg-cont p{
  white-space: pre-wrap;
  padding: 5px;
  width: 100%;
}
.new-msg-btns{
  padding-top: 10px; 
  visibility: hidden;
}
.new-msg-btns ul li{
  float: right;
  margin-right: 30px;
}
.new-msg-reply{
  font-size: 12px;
  cursor: pointer;
}
.new-msg-reply:hover{
  color: #fd8585;
}
.msg-out{
  margin: 2px 2px 40px 2px;
}
.show-btns{
  visibility: visible;
}
</style>
